<template>
	<view class="addstaffbox">
		<view class="item">
			<text>持卡人姓名</text>
			<view>
				<input type="text" value="" v-model="params.real_name" placeholder="请输入持卡人姓名" />
			</view>
		</view>
		<view class="item">
			<text>选择银行</text>
			<view>
				<picker @change="bindPickerChange" :range="array">
					<label class="">{{array[index]}}</label>
				</picker>
			</view>
		</view>
		<view class="item">
			<text>开户支行</text>
			<view>
				<input type="text" value="" v-model="params.sub_bank" placeholder="请输入开户支行" />
			</view>
		</view>
		<view class="item">
			<text>银行卡号</text>
			<view>
				<input type="text" value="" v-model="params.card_no" placeholder="请输入银行卡号" />
			</view>
		</view>
		<view class="item">
			<text>手机号</text>
			<view>
				<input type="p" value="" v-model="params.mobile" placeholder="请输入手机号" />
			</view>
		</view>
		<view class="item">
			<text>验证码</text>
			<view>
				<view class="indenty">
					<input type="text" v-model="params.captcha" />
					<view @click="getCode"  v-if="!isseend">获取验证码</view>
					<view v-else class="isseend">
						{{num}}后获取
					</view>
				</view>
			</view>
		</view>
		<view class="add" @click="add">
			<text>
				立即绑定
			</text>

		</view>
	</view>
</template>

<script>
	import {
		sendBank,
		bdBank,
		Banks
	} from "../../../apis/shop/api.js"
	export default {
		data() {
			return {
				params: {
					bank: "",
					bank_id:''
				},
				current: 0,
				username: "",
				password: "",
				store_id: "",
				token: "",
				index: 0,
				image: [],
				num:60,//倒计时
				isseend:false,
				array: ['中国银行', '中国建设银行', '中国工商银行', '招商银行', '平安银行', '交通银行', '中国农业银行'],
				bankIdList:[],
			}
		},
		onLoad() {
			this.store_id = uni.getStorageSync("store_id");
			this.token = uni.getStorageSync("token");
			this.getCardList()
		},
		methods: {
			add() {
				this.params.store_id = this.store_id;
				this.params.token = this.token;
				bdBank(this.params).then(res=>{
					console.log(res)
					if(res.code == 1){
						uni.showToast({
							title:"绑定成功"
						})
						uni.navigateTo({
							url: '/pages/shopmanager/cardmanager/index'
						});
					}
					else{
						uni.showToast({
							title:res.msg
						})
					}
				})
			},
			getCardList(){
				let that = this
				Banks({
					store_id: that.store_id,
					token: that.token,
				}).then(res=>{
					if(res.code == 1){
						that.array = [];
						that.bankIdList = [];
						res.data.banks.forEach(item=>{
							that.array.push(item.bank)
							that.bankIdList.push(item.bank_id)
						})
						that.params.bank = that.array[0];
						that.params.bank_id = that.bankIdList[0];
					}
				})
			},
			getCode() {
				let that = this
				if(!(/^1[3456789]\d{9}$/.test(that.params.mobile))){
					uni.showToast({
						title:"手机号格式不正确",
						icon:"none"
					})
				}
				else if(!that.isseend){
					sendBank({
						mobile: that.params.mobile
					}).then(res => {
						if(res.code == 1){
							that.isseend = true;
							let setIntervalid = setInterval(function(){
								if(that.num > 0){
									that.num --
								}
								else{
									that.num = 60;
									that.isseend = false;
									clearInterval(setIntervalid)
								}
							},1000)
						}
					})
				}
				
			},
			bindPickerChange(e) {
				this.index = e.target.value;
				this.params.bank = this.array[this.index];
				this.params.bank_id = this.bankIdList[this.index];
			}
		}
	}
</script>

<style lang="less">
	.chooseImage {
		width: 163rpx;
		height: 141rpx;
		background-color: #F2F2F2;
		float: left;
		margin: 6rpx;
		font-size: 24rpx;
		color: #c5c5c5;
		position: relative;

		.iconadd {
			font-size: 50rpx;
		}

		&.chooseImage2 {
			width: 271rpx;
			height: 207rpx;
		}

		image {
			position: absolute;
			z-index: 1;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	}

	.addstaffbox {
		padding: 0 30rpx;

		.item {
			border-bottom: 1rpx solid #C7BEBE;
			display: flex;
			line-height: 88rpx;

			&>text {
				display: block;
				width: 150rpx;
				text-align: left;
				margin-right: 40rpx;
			}

			&>view {
				flex: 1;
				position: relative;

				.indenty {
					display: flex;

					input {
						flex: 1;
					}

					view {
						width: 176rpx;
						height: 48rpx;
						background-color: #E41805;
						color: #fff;
						border-radius: 10rpx;
						margin: 0 10rpx;
						margin-top: 20rpx;
						text-align: center;
						line-height: 48rpx;
						&.isseend{
							background-color: #666;
							color: #333;
						}
					}
				}

				.imgbox {
					image {
						width: 163rpx;
						height: 141rpx;
					}
				}

				input {
					height: 88rpx;
					line-height: 88rpx;
				}

				switch {
					float: right;
				}

				text {
					font-size: 30rpx;
					color: #999999;

					&:nth-child(2) {
						position: absolute;
						font-size: 40rpx;
						right: 0;
						top: 0;
						z-index: 12;
					}

				}
			}
		}

		.login {
			background-color: #E41805;
			color: #fff;
			font-size: 30rpx;
			line-height: 84rpx;
			margin-top: 30rpx;
			text-align: center;
			border-radius: 5px;

		}
	}

	.add {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 166rpx;
		padding: 30rpx;
		box-shadow: -1px -2px 7px 0px rgba(0, 0, 0, 0.1);

		text {
			display: block;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #E41805;
			color: #fff;
			text-align: center;
			border-radius: 10rpx;
		}

	}
</style>
